<template>
  <div class="doc-container">
    <!-- 顶部导航 -->
    <div class="doc-nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>API文档</el-breadcrumb-item>
        <el-breadcrumb-item>REST API</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="doc-content">
      <!-- 左侧目录 -->
      <div class="doc-sidebar">
        <div class="sidebar-header">
          <h3>目录</h3>
        </div>
        <el-menu 
          :default-active="activeMenu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="introduction">
            <i class="el-icon-document"></i>
            <span>简介</span>
          </el-menu-item>
          <el-menu-item index="authentication">
            <i class="el-icon-lock"></i>
            <span>认证方式</span>
          </el-menu-item>
          <el-menu-item index="request-format">
            <i class="el-icon-s-operation"></i>
            <span>请求格式</span>
          </el-menu-item>
          <el-menu-item index="response-format">
            <i class="el-icon-s-data"></i>
            <span>响应格式</span>
          </el-menu-item>
          <el-menu-item index="error-handling">
            <i class="el-icon-warning"></i>
            <span>错误处理</span>
          </el-menu-item>
          <el-menu-item index="rate-limiting">
            <i class="el-icon-time"></i>
            <span>速率限制</span>
          </el-menu-item>
          <el-menu-item index="examples">
            <i class="el-icon-s-opportunity"></i>
            <span>示例</span>
          </el-menu-item>
          <el-menu-item index="best-practices">
            <i class="el-icon-star-off"></i>
            <span>最佳实践</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧内容 -->
      <div class="doc-main" ref="docMain">
        <div class="content-section" id="introduction">
          <h1>REST API 快速入门指南</h1>
          <div class="section-content">
            <p>REST API是一种软件架构风格，用于设计网络应用程序。我们的REST API遵循RESTful架构原则，提供了简单而强大的HTTP接口。</p>
            <el-card class="feature-card">
              <div class="feature-item">
                <i class="el-icon-connection"></i>
                <div class="feature-text">
                  <h4>简单易用</h4>
                  <p>标准HTTP方法，JSON数据格式</p>
                </div>
              </div>
              <div class="feature-item">
                <i class="el-icon-cpu"></i>
                <div class="feature-text">
                  <h4>高性能</h4>
                  <p>优化的响应速度，支持缓存</p>
                </div>
              </div>
              <div class="feature-item">
                <i class="el-icon-lock"></i>
                <div class="feature-text">
                  <h4>安全可靠</h4>
                  <p>Token认证，HTTPS加密</p>
                </div>
              </div>
            </el-card>
          </div>
        </div>

        <div class="content-section" id="authentication">
          <h2>认证方式</h2>
          <div class="section-content">
            <h3>Bearer Token认证</h3>
            <p>所有API请求都需要在Header中携带token:</p>
            <div class="code-block">
              <pre><code>Authorization: Bearer your-token-here</code></pre>
              <el-button 
                size="small" 
                type="primary" 
                class="copy-btn"
                @click="copyCode('Authorization: Bearer your-token-here')"
              >
                复制
              </el-button>
            </div>
          </div>
        </div>

        <!-- 其他内容部分... -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RestApiDoc',
  data() {
    return {
      activeMenu: 'introduction'
    }
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index;
      const element = document.getElementById(index);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    },
    copyCode(code) {
      navigator.clipboard.writeText(code).then(() => {
        this.$message.success('复制成功');
      }).catch(() => {
        this.$message.error('复制失败');
      });
    }
  }
}
</script>

<style scoped>
.doc-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.doc-nav {
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.doc-content {
  display: flex;
  gap: 30px;
}

.doc-sidebar {
  width: 260px;
  position: sticky;
  top: 20px;
  height: calc(100vh - 100px);
  overflow-y: auto;
  border-right: 1px solid #eee;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.doc-main {
  flex: 1;
  max-width: 800px;
}

.content-section {
  margin-bottom: 40px;
}

.content-section h1 {
  font-size: 2.5em;
  color: #2c3e50;
  margin-bottom: 30px;
}

.content-section h2 {
  font-size: 2em;
  color: #2c3e50;
  margin: 30px 0 20px;
}

.section-content {
  color: #34495e;
  line-height: 1.6;
}

.feature-card {
  margin: 20px 0;
  padding: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.feature-item i {
  font-size: 2em;
  color: #409EFF;
  margin-right: 20px;
}

.feature-text h4 {
  margin: 0 0 5px;
  color: #2c3e50;
}

.feature-text p {
  margin: 0;
  color: #666;
}

.code-block {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 15px;
  margin: 15px 0;
  position: relative;
}

.code-block pre {
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

.copy-btn {
  position: absolute;
  right: 10px;
  top: 10px;
}

@media (max-width: 768px) {
  .doc-content {
    flex-direction: column;
  }

  .doc-sidebar {
    width: 100%;
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }
}
</style> 